<template>
  <Modal
    v-model="visible"
    :title="title"
    @on-ok="ok"
    @on-cancel="cancel"
    okText="确定"
    cancelText="清空"
    width="1240"
  >
    <div class="healthDocument">
      <div class="healthInfo">
        <div class="title">主要健康数据：</div>
        <div class="iconList">
          <div class="item" v-for="i in 12" :key="i">
            <img class="img" src="../../assets/icons/tanshui.png" alt="">
            <div class="key">身高</div>
            <div class="val">190cm</div>
          </div>
        </div>
        <div class="title">病史资料</div>
        <div class="infoList">
          <div class="infoItem">
            <div class="key">治疗方式：</div>
            <div class="val">口服药</div>
          </div>
          <div class="infoItem">
            <div class="key">并发症：</div>
            <div class="valList">
              <div class="item active">无并发症</div>
              <div class="item">无并发12症</div>
              <div class="item">无并发12症</div>
              <div class="item">无并发12症</div>
              <div class="item">无并11发症</div>
              <div class="item">无并发症</div>
            </div>
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div class="imgList">
         <div class="title">
           <span>体检报告</span>
           <span>上传日期：2021/3/4</span>
         </div>
        <div class="swiperBox">
          <swiper class="swiper-container" ref="mySwiper" :options="swiperOptions">
            <swiper-slide v-for="item in imgList" :key="item"><img :src="item" alt=""></swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
          </swiper>

          <!-- <div class="number">{{imgIndex}}/{{detailimages.length}}</div> -->
        </div>
      </div>
    </div>
  </Modal>
</template>
<script>
export default {
  name: 'healthDocumentModel',
  props: {
    activityData: { type: Object },
    show: Boolean,
    title: String
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.$swiper
    }
  },
  data () {
    return {
      visible: this.show,
      activityForm: {
        name: '',
        date: '',
        time: '',
        arr: []
      },
      swiperOptions: {},
      imgList: ['//webimg.ziroom.com/57cc79b1-2186-4b88-b527-94d9c0a37f15.png', 'https://webimg.ziroom.com/6070081d-21e6-49b5-b9e2-c853f3227d72.jpg', 'https://webimg.ziroom.com/b4ecd893-ae3f-411a-ba8e-d7d07b70d847.jpg']
    }
  },
  watch: {
    show (newv, oldv) {
      this.visible = newv
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initSwiper()
    })
  },
  methods: {
    ok () {
      this.visible = false
      if (this.isEdited) this.$emit('mdyData', this.data)
      this.$emit('showModel', this.visible)
    },
    cancel () {
      this.visible = false
      this.$emit('showModel', this.visible)
    },
    initSwiper () {
      this.swiperOptions = {
        loop: true,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        pagination: {
          el: '.swiper-pagination',
          type: ''
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
.healthDocument {
  box-sizing: border-box;
  width: 100%;
  height: 60vh;
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  .line {
    width: 1px;
    height: 100%;
    background: #f4f4f4;
  }
  .healthInfo,.imgList {
    width: 620px;
    box-sizing: border-box;
    height: 100%;
    overflow-y: scroll;
  }
  .title{
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #9F9F9F;
    box-sizing: border-box;
    padding: 23px 30px 40px;
  }
  .iconList{
    padding: 0 30px;
    box-sizing: border-box;
    display: flex;
    // justify-content: space-between;
    flex-wrap: wrap;
    .item{
      width: 70px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin:0 40px 40px 0;
      .img{
        width: 35px;
        height: 35px;
        margin-bottom: 4px;
      }
      .key{
        width: 100%;
        text-align: center;
        height: 18px;
        font-size: 12px;
        color: #9F9F9F;
        line-height: 18px;
        margin-bottom: 6px;
      }
      .val{
        height: 14px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #242424;
        line-height: 14px;
      }
    }
  }
  .infoList {
    padding-right: 60px;
    box-sizing: border-box;
    .infoItem{
      display: flex;
      margin-bottom: 40px;
      .key{
        width: 160px;
        flex-shrink: 0;
        margin-right: 10px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #242424;
        height: 22px;
        line-height: 22px;
        text-align: right;
      }
      .val{
        color: #9F9F9F;
        font-size: 15px;
        height: 22px;
        line-height: 22px;
      }
      .valList{
        display: flex;
        flex-wrap: wrap;
        .item{
          padding: 0 9px;
          display: flex;
          align-items: center;
          height: 22px;
          background: #F8F8F8;
          color: #242424;
          font-size: 12px;
          border-radius: 2px;
          margin: 0 16px 20px 0;
        }
        .item.active{
          background: #13BE9B;
          color: #fff;
        }
      }
    }
  }
  .swiperBox{
    width: 100%;
    position: relative;
    .swiper-container {
      width: 100%;
    }
    .swiper-slide {
      padding: 0 48px 60px;
      box-sizing: border-box;
      background: #eee;
      display: flex;
      img{
        width: 100%;
        height: auto;
      }
    }
  }
}
</style>
<style lang="less">
.ivu-form .ivu-form-item-label {
  padding: 10px 0;
}
</style>
